<template>
    <div class="dailyMember">
        <div class="top">
            <el-form class="xHeight" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
                <el-form-item label="部门">
                     <el-tree-select
                            v-model="treeData"
                            :data="deptTree"
                            :render-after-expand="false"
                            check-strictly
                            check-on-click-node
                            :props="defaultProps"
                            @node-click="handleNodeClick"
                            node-key="id"
                        />
                </el-form-item>
                <el-form-item label="姓名">
                      <el-input v-model="queryParams.userName" placeholder="请输入" />  
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                        v-model="queryParams.reportDate"
                        type="date"
                        placeholder="Pick a day"
                        :size="default"
                    />
                </el-form-item>
                <el-form-item>
                    <div class="cz" @click="reset">重置</div>
                    <div class="cx" @click="getTablist">查询</div>
                </el-form-item>
            </el-form>
        </div>
        <div class="center">
            <div class="centerTop">
                <el-row>
                    <el-col :span="1"><el-button :icon="Download" class="updateRB" @click="openExport">导出</el-button></el-col>
                    <el-col :span="23"></el-col>
                </el-row>
            </div>
            <div class="centerCenter">
                <el-row type="flex" :gutter="20" style="height: 98%;width: 100%;">
                    <el-col :xs="24" :sm="24" :md="12" :lg="8" style="padding: 5px 10px;"  v-for="(item,index) in dataList" :key="index" >
                        <div class="nr" @click.native="rbDetail(item)">
                            <div class="nrTop">
                                <div class="left">
                                    <img :src="item.imgUrl" style="object-fit: cover;" alt="" />
                                    <span class="name">{{ item.userName }}</span>
                                    <span class="title">{{ item.reportDate }}工作日报 </span>
                                </div>
                                <div class="right">
                                    <div class="isRead" :style="{ color: isReadName[item.isRead].color, backgroundColor: isReadName[item.isRead].backgroundColor }" v-if="item.isRead != null">{{ isReadName[item.isRead].label }}</div>
                                </div>
                            </div>
                            <div class="nrCenter">
                                <div class="rbnr" v-if="item.id != null">
                                    <div class="xxnr" v-for="i in item.dailyReportList">
                                        <p>{{ i.projectName }} (工时{{ i.workHours }}h)</p>
                                        <div v-html="i.content" class="htmlBox"></div>
                                    </div>
                                </div>
                                <div class="wsj" v-else>
                                    <el-empty :image-size="40" description="暂无日报" />

                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="buttom">
                 <!-- <pagination
                    v-show="total > 0"
                    :total="total"
                    :default-page-size="6"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    :page-sizes="[6,12,18,24,30]"
                    @pagination="getTablist"
                /> -->
            </div>
        </div>
         <el-dialog
                v-model="dialogVisible"
                title="工作日报"
                width="45%"
                :before-close="handleClose"
                :close-on-click-modal="false" 
                :close-on-press-escape="false"
            >
             <getDailys :myDailyList="myDailyList" :isMember="true" :isSubmit="isSubmit"  @closeTab="closeTab" @isSubmit="getSubmit"></getDailys>
			 
			 <template #footer>
                <el-button class="addPublish" @click="addComments" v-if="annotateUser != userId" > {{ editFlag ? '编辑批注': '保存批注' }} </el-button>
                <el-button  @click="handleClose">关闭</el-button>
            </template>
          </el-dialog> 
    </div>
</template>
<script setup>
import { getDeptTreeselect } from '@/api/dept';
import { getDailyReportList,updChangeView, getReportByDate } from '@/api/dailyReport';
import { Download } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import useUserStore from '@/store/modules/user';
import getDailys from './getDailys.vue';
const { proxy } = getCurrentInstance();
const deptTree = ref([]);
const treeData = ref();
let isSubmit = ref(false);
let total = ref(0);
let dialogVisible = ref(false);
const useStore = useUserStore();
const userId = ref(useStore.userId);
const defaultProps = {
    children: 'children',
    label: 'label',
}
const annotateContent = ref(null);
const annotateUser = ref(null);
const userName = ref(useStore.name);
const detailuseName = ref(null);
const swTree = ref(null);
const editFlag = ref(false);
const data = reactive({
    queryParams: {
        deptId: null,
        reportDate: proxy.parseTime(new Date(new Date().getTime() - 24 *60*60*1000), '{y}-{m}-{d}'),
        userName: null
    },
    dataList: [],
    isReadName: {
        0: { color: '#BE1A21', backgroundColor:'#FFDADE', label: '未读' },
        1: { color: '#999999', backgroundColor: '#EEEEEE', label: '已读' },
        2: { color: '#ffffff', backgroundColor: '#1AC45F', label: '已批注' }
    },
    myDailyList: [],
    formData:null
    //isReadName: ['未读', '已读', '已批注']
    
});
const { queryParams, dataList , isReadName , myDailyList , formData } = toRefs(data);
const getTreeSelect = () => {
    getDeptTreeselect().then(res => {
        if (res.code === 200) {
            deptTree.value = res.data;
            if (res.data.length > 0) {
                res.data.map(item => {
                    if (item.id == 24 && item.children && item.children.length > 0) {
                        item.children.map(i => {
                            if (i.id.indexOf('1509803791454629889') != -1) { 
                                swTree.value = i.id;
                                treeData.value = i.id;
                            }
                        })
                    } else if(item.id.indexOf('1509803791454629889') != -1) {
                       swTree.value = i.id;
                        treeData.value = i.id; 
                    }
                })
            }
            proxy.$nextTick(() => {
                 getTablist();
            })
            
        }
    })
}

const reset = () => {
    treeData.value = swTree.value ? swTree.value :'';
    queryParams.value.userName = '';
    queryParams.value.reportDate = proxy.parseTime(new Date(), '{y}-{m}-{d}');
    getTablist();
}
const getTablist = () => {
    queryParams.value.deptId = treeData.value ? treeData.value : '';
    queryParams.value.reportDate = proxy.parseTime(queryParams.value.reportDate, '{y}-{m}-{d}');
    getDailyReportList(queryParams.value).then(res => {
        if (res.code === 200) {
            dataList.value = res.data; 
            total.value = res.total;
            if (dataList.value.length > 0) {
                dataList.value.map(item => {
                    item.imgUrl = import.meta.env.VITE_APP_BASE_API + item.avatar
                    if (item.dailyReportList && item.dailyReportList.length > 0) {
                        item.dailyReportList.map(i => {
                            i.content = getImgSrc(i.content);
                        })
                    }
                })
            }
        }
        
    })
}
const getImgSrc = (richtext) => {
   if (richtext.indexOf('src="') != -1) {
        if (richtext.indexOf('http') != -1 || richtext.indexOf('https') != -1) {
            return richtext;
        }
        richtext = richtext.replaceAll('src="', 'src="' + import.meta.env.VITE_APP_BASE_API + '');
    }
    return richtext
}
const handleNodeClick = (e) => {
    treeData.value = e;
    proxy.$nextTick(() => {
        getTablist();
    })
};
const addComments = () => {
    isSubmit.value = true;
   // console.log(formData.value.formData);
}
const openExport = () => {
    queryParams.value.deptId = treeData.value ? treeData.value : '';
    queryParams.value.reportDate = proxy.parseTime(queryParams.value.reportDate, '{y}-{m}-{d}');
    proxy.download("/dailyReport/export", {
        ...queryParams.value,
    }, `${queryParams.value.reportDate}成员日报.zip`);
}
const handleClose = (done) => {
    getTablist();
    dialogVisible.value = false;
}
const rbDetail = (item) => {
    editFlag.value = false;
    if (item.id !== null) {
        if (item.isRead == 0) {
            if (item.userId != userId.value) {
                updChangeView(item.id);
            }
        }
        if (item.annotateList.length > 0) {
            item.annotateList.map(i => {
                if (i.annotateUser == userName.value) {
                    editFlag.value = true;
                }
           })
        }
       // annotateContent.value = item.annotateContent;
	    console.log(item);
        myDailyList.value = item;
        annotateUser.value = item.userId;
        detailuseName.value = item.userName;
        dialogVisible.value = true;
    } else {
        ElMessage.error({ message: '暂无日报', type: 'success', duration: 1 * 1000 })
    }
}
const closeTab = (bool) => {
    dialogVisible.value = bool;
    isSubmit.value = false;
    getTablist();
   // getTreeSelect();
}
const getSubmit = (bool) => {
    isSubmit.value = false;
}

getTreeSelect();
</script>

<style lang="scss" scoped>
$primary-color:#041428;
$color:#BE1A21;
.dailyMember{
    width: 100%;
    height: 100%;
    .top{
        background: #ffffff;
        padding: 20px 20px 2px 20px;
        border-radius: 10px;
        .pst {
            position: absolute;
            right: 36px;
            padding: 6px;
        }
    }
    .center{
        width: 100%;
        height: 89%;
        background-color: #ffffff;
        border-radius: 10px;
        margin: 1.265rem auto;
        .centerTop{
            width: 97%;
            height: 8%;
            display: flex;
            align-items: center;
            margin: 0 auto;
            .el-row{
                width: 100%;
            }
        }
        .centerCenter{
            width: 97%;
            height: 90%;
            margin: 0 auto;
            overflow-y: auto;
            display: flex;
            flex-flow: wrap;
            //justify-content: center;
            .nr{
                border-radius: 10px;
                border: 2px solid #BE1A21;
                cursor: pointer;
                height: 100%;
                max-height: 200px;
                .nrTop{
                    width: 95%;
                    height: 46px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 0 auto;
                    border-bottom: 1px dashed #D9D9D9;
                    .left,.right{
                        height: 100%;
                        display: flex;
                        align-items: center;
                        span{
                            margin: 0 10px;
                        }
                        img{
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        }
                        .isRead{
                            width: 64px;
                            height: 32px;
                            border-radius: 6px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                }
                }
                .nrCenter{
                    width: 100%;
                    height: 147px;
                    .rbnr{
                       width: 94%;
                       height: 100%; 
                       margin: 0 auto;
                        overflow: hidden;
                       .xxnr{
                            p{
                                color: #BE1A21;
                                margin: 16px 0 10px 0;
                                font-size: 16px;
                                font-weight: 500;
                            }
                            :deep(.htmlBox)  {
                                height: 100%;
                                width: 100%;
                                p {
                                    color: #1e1e1e;
                                    font-size: 14px;
                                    margin: 0px;
                                    font-weight: 400;
                                }
                                img{
                                    width: 200px;
                                }
                            }
                       }
                    }
                    .wsj{
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-flow: column;
                        align-items: center;
                        .el-empty{
                            --el-empty-fill-color-0: var(--el-color-white);
                            --el-empty-fill-color-1: #fcfcfd;
                            --el-empty-fill-color-2: #f8f9fb;
                            --el-empty-fill-color-3: #f7f8fc;
                            --el-empty-fill-color-4: #eeeff3;
                            --el-empty-fill-color-5: #edeef2;
                            --el-empty-fill-color-6: #e9ebef;
                            --el-empty-fill-color-7: #e5e7e9;
                            --el-empty-fill-color-8: #e0e3e9;
                            --el-empty-fill-color-9: #d5d7de;
                            --el-text-color-secondary: #aaaaaa;
                        }
                    }
                }
            }
        }
        .buttom{
            width: 100%;
            height: 10%;
        }
    }
    .el-button--danger{
        background: #FFDADE;
        color: #BE1A21; 
        border-color:#FFDADE;
    }
    .updateRB{
        background: #BE1A21;
        color: #ffffff; 
        border-color:#BE1A21;
    }
    .pagination-container{
        position: absolute;
        bottom: 24px;
        right:  30%;
    }
    .nr:hover {
		cursor: pointer;
		z-index: 1000;
		background: rgba(184, 22, 12, 0.1);
	}
    .el-overlay-dialog{
        max-height: 500px;
        overflow-y: auto;
    }
    .addPublish{
        background: $color;
        border-color: $color;
        color:#ffffff;
    }
}
</style>